<template>
    <div class="login">
        <div class="login_box">
            <van-row type="flex" justify="center">
                <h3>欢迎登录</h3>
            </van-row>

            <van-form @submit="onSubmit">
                <input type="password" style="opacity: 0" />

                <!-- 用户名输入框 -->
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    autocomplete="new-password"
                />

                <!-- 密码输入框 -->
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    autocomplete="new-password"
                />

                <!-- 登录按钮 -->
                <van-button
                    block
                    plain
                    hairline
                    size="small"
                    type="primary"
                    native-type="submit"
                >
                    登录
                </van-button>
            </van-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: "",
            password: "",
        };
    },
    methods: {
        async onSubmit() {
            const res = await this.$http.post("/login", {
                username: this.username,
                password: this.password,
            });
            if (res.code !== 200) {
                this.$toast({
                    type: "fail",
                    message: res.message,
                });
                return;
            }
            // 存储到 sessionStoreage 中
            window.sessionStorage.setItem("token", res.data.token);
            // 存储用户信息
            window.sessionStorage.setItem(
                "user",
                JSON.stringify(res.data.user)
            );
            // 跳转到列表页面
            this.$router.push("/admin/blog/list");
        },
    },
};
</script>

<style lang="less">
.login {
    height: 100%;

    &_box {
        margin: 165px 10px 0 10px;

        .van-field,
        .van-button {
            margin-bottom: 10px;
        }
    }
}
</style>
